<style>
    .marginTop8{
        margin-top:8px;
    }
</style>

<div class="layui-fluid" id="drawing-detail" >
    <form class="layui-form" action="" lay-filter="drawing-detail-form">
        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">类型：</label>
            <div class="layui-input-block">
                <input type="text" name="type" minlength="2" maxlength="10" lay-verify="range|type"
                       autocomplete="off" class="layui-input" data-th-value="${drawingDetail?.type}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">客户型号：</label>
            <div class="layui-input-block">
                <input type="text" name="customerType" minlength="2" maxlength="10" lay-verify="range|customerType"
                       autocomplete="off" class="layui-input" data-th-value="${drawingDetail?.customerType}">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label febs-form-item-require">型号：</label>
            <div class="layui-input-block">
                <input type="text" name="model" minlength="2" maxlength="10" lay-verify="range|model"
                       autocomplete="off" class="layui-input" data-th-value="${drawingDetail?.model}">
            </div>
        </div>
        <div class="layui-form-item febs-hide">
                <input type="text" name="id"  class="layui-input drawingId" data-th-value="${drawingDetail?.id}">
        </div>

        <div class="layui-form-item febs-hide">
            <input  name="drawingId" />
        </div>
        <div class="layui-form-item febs-hide">
            <button class="layui-btn " style="margin-left:5px;" lay-submit="" lay-filter="drawing-detail-form-submit" id="submit">保存</button>
        </div>

    </form>
   <div class="layui-collapse" lay-filter="detailInfo" id="detailInfo">
            <div class="layui-colla-item">
                <h2 class="layui-colla-title">添加详细</h2>
                <div class="layui-colla-content ">
                    <div class="layui-form-item ">
                        <label class="layui-form-label febs-form-item-require">图纸号：</label>
                        <div class="layui-input-block">
                            <input type="text" name="drawingNo" minlength="2" maxlength="10"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item ">
                        <label class="layui-form-label febs-form-item-require">名称：</label>
                        <div class="layui-input-block">
                            <input type="text" name="drawingName" minlength="2" maxlength="10"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item ">
                        <label class="layui-form-label febs-form-item-require">数量：</label>
                        <div class="layui-input-block">
                            <input type="text" name="count" lay-verify="number"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item ">
                        <div class="layui-input-block" >
                            <button type="button" class="layui-btn layui-btn-normal" id="addDetailInfo">添加</button>
                            <button type="button" class="layui-btn layui-btn-normal" id="resetDetailInfo">重置</button>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    <table  lay-filter="drawingDetailTable" lay-data="{id: 'drawingDetailTable'}"></table>
</div>
<!--  <a lay-event="detail"><i class="layui-icon febs-edit-area febs-green">&#xe7a5;</i></a>
   <a lay-event="edit" ><i  class="layui-icon febs-edit-area febs-blue">&#xe7a4;</i></a>-->
<script type="text/html" id="drawing—detail-option">
    <a lay-event="del"><i class="layui-icon febs-edit-area febs-red">&#xe7f9;</i></a>
</script>
<script data-th-inline="javascript">
    /*<![CDATA[*/

    var drawingId =/*[[${drawingId}]]*/'';
    var drawingDetailId =/*[[${drawingDetail.id}]]*/'';

    /*]]>*/
</script>
<script data-th-inline="none" type="text/javascript">
    layui.use(['febs','form','validate','table','layer','element'],function(){
        var $ = layui.$,
            form=layui.form,
            layer = layui.layer,
            febs = layui.febs,
            validate=layui.validate,
            $view = $('#drawing-detail'),
            element = layui.element,
            $reset = $view.find('#resetDetailInfo'),
            table=layui.table,

            tableIns;
        element.render('collapse', 'detailInfo');
        //监听折叠
        element.on('collapse(detailInfo)', function(data){
            console.log(data.show); //得到当前面板的展开状态，true或者false
            console.log(data.title); //得到当前点击面板的标题区域DOM对象
            console.log(data.content); //得到当前点击面板的内容区域DOM对象
        });

        $reset.on('click',function () {
            $view.find('input[name="drawingNo"]').val("");
            $view.find('input[name="drawingName"]').val("");
            $view.find('input[name="count"]').val("");
        });

            form.verify(validate);
            form.render();
            $view.find('input[name="drawingId"]').val(drawingId);
            form.on('submit(drawing-detail-form-submit)', function (data) {
                febs.post(ctx + 'drawlingDetail', data.field, function () {
                    console.log(JSON.stringify(data.field));
                    layer.closeAll();
                    if(drawingId==''||drawingId==null){
                        febs.alert.success('新增成功');
                    }else{
                        febs.alert.success('修改成功');
                    }

                });
                return false;
            });


        initTable();

        function initTable() {
            tableIns = febs.table.init({
                elem: $view.find('table'),
                id: 'drawingDetailTable',
                url: ctx + 'detailInfo/list',
                where:{"drawingDetailId":drawingDetailId},
                cols: [[
                    {type: 'checkbox'},
                    {field: 'drawingNo', title: '图纸号',edit: 'text', minWidth: 100},
                    {field: 'name', title: '名称',edit: 'text', minWidth: 100},
                    {field: 'count', title: '数量',edit: 'text', minWidth: 100},
                    {title: '操作', toolbar: '#drawing—detail-option', minWidth: 140}
                ]]
            });

        }
        $view.find('#addDetailInfo').on('click', function () {
            var drawingNo=  $view.find('input[name="drawingNo"]').val().trim();
            var drawingName=  $view.find('input[name="drawingName"]').val().trim();
            var count=$view.find('input[name="count"]').val().trim();
            var drawingDetailId=  $view.find('input[name="id"]').val().trim();
            if(drawingDetailId==null||drawingDetailId===''){
                layer.msg("请先保存类型等基础信息");
                return ;
            }
            if(!drawingNo){
                layer.msg("图纸号必填"+drawingNo);
                return ;
            }
            if(!drawingName){
                layer.msg("图纸名称必填");
                return ;
            }
            if(!count){

                layer.msg("数量必填");
                return ;
            }else{
                var s=  /^[1-9]\d*$/.test(count);
                if(!s){
                    layer.msg("数量错误");
                    return ;
                }

            }

            febs.post(ctx + 'detailInfo', {drawingDetailId:drawingDetailId,drawingNo:drawingNo,name:drawingName,count:count}, function (data) {
                febs.alert.success('添加成功');
                tableIns.reload({where: {drawingDetailId: drawingDetailId}, page: {curr: 1}});
            })
        });


        //操作事件
        table.on('tool(drawingDetailTable)', function (obj) {
            var data = obj.data,
                layEvent = obj.event;
            /*添加备注信息*/
            if (layEvent === 'detail') {
              /*  febs.modal.view('选择备注信息', 'system/select/mark/' + data.id, {
                    area: [$(window).width() <= 750 ? '95%' : '660px','60%']
                });*/
            }
            if (layEvent === 'del') {
                febs.modal.confirm('删除数据', '确定删除该数据？', function () {
                    deleteDrawings(data.id);
                });
            }
            if (layEvent === 'edit') {
               /* febs.modal.view('明细表', 'system/drawing/detail/' + data.id, {
                    area: [$(window).width() <= 750 ? '95%' : '660px','100%'],
                    btn: ['提交', '取消'],
                    yes: function (index, layero) {
                        $('#drawing-detail').find('#submit').trigger('click');
                    },
                    btn2: function () {
                        layer.closeAll();
                    }

                });*/
            }
        });

        //删除
        function deleteDrawings(ids) {
            febs.get(ctx + 'detailInfo/delete/' + ids, null, function () {
                febs.alert.success('删除用户成功');
                tableIns.reload({where: {drawingDetailId: drawingDetailId}, page: {curr: 1}});
            });
        }


    })



</script>